<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 隐藏段落                       */
        p {
            visibility: hidden;
        }

        /* 只有 class 设为 showme 的才会显示*/
        p.showme {
            visibility: visible;
        }

        /* 折叠 class 设为 col 的行        */
        tr.col {
            visibility: collapse;
        }
    </style>
</head>

<body>

    <!-- visibility -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/visibility -->
    <!-- CSS属性 visibility 显示或隐藏元素而不更改文档的布局。该属性还可以隐藏<table>中的行或列。 -->

    <!-- visible -->
    <!-- 元素正常显示。 -->
    <!-- hidden -->
    <!-- 隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。要注意若将其子元素设为 visibility: visible，则该子元素依然可见。 -->


    <div>
        隐藏下面的段落，
        <p>被隐藏的内容</p>
        你看到了吗？
    </div>

    <hr>

    <div>
        只有 class 设为 showme 的才会显示
        <p>测试内容</p>
        <p class="">class=""</p>
        <p class="showme">class="showme"</p>
        <p class="showyou">class="showyou"</p>
    </div>

</body>

</html>